<template>
  <div class="apply-store">

    <my-header title="申请开店" @onClickLeft="$router.push('/search')"/>
    <!-- 表单类 -->
    <van-form validate-first @failed="onFailed">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field name="uploader" label="店铺头像">
  <template #input>
    <van-uploader />
  </template>
</van-field>
  <!-- 通过 validator 进行函数校验 -->
  <van-field name="uploader" label="产品图">
  <template #input>
    <van-uploader/>
  </template>
</van-field>
  <!-- 通过 validator 进行异步函数校验 -->
  <van-field
  v-model="value1"
    name="asyncValidator"
    label="店铺名称"
    placeholder="请输入店铺名称"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field
  v-model="value2"
    name="asyncValidator"
    label="分店名称"
    placeholder="请输入分店名称"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field name="uploader" label="店铺实拍">
  <template #input>
    <van-uploader/>
  </template>
</van-field>
  <van-field name="uploader" label="产品图">
  <template #input>
    <van-uploader/>
  </template>
</van-field>
  <van-field
  v-model="value3"
    name="asyncValidator"
    label="身份证号"
    placeholder="请输入身份证号"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field name="uploader" label="身份证照">
  <template #input>
    <van-uploader/>
  </template>
</van-field>
  <van-field
  v-model="value4"
    name="asyncValidator"
    label="联系方式"
    placeholder="请输入联系方式"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field
  v-model="value5"
    name="asyncValidator"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field
  v-model="value6"
    name="asyncValidator"
    label="邀请码"
    placeholder="选填"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <van-field name="radio" label="发货方式">
  <template #input>
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio name="1">到店自提</van-radio>
      <van-radio name="2">区域配送</van-radio>
    </van-radio-group>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import MyHeader from '../my/components/my-header.vue'
export default {
  name: 'applyStore',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      pattern: /\d{6}/,
      radio: '1',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val)
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        this.$toast.loading('验证中...')

        setTimeout(() => {
          this.$toast.clear()
          resolve(/\d{6}/.test(val))
        }, 1000)
      })
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>

<style lang="less">
.apply-store {
  margin-bottom: 150px;
}
</style>
